<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎登录APP</view>
			<view v-if="loginWay == '短信验证登录'" >
				<input class="u-border-bottom"  v-model="username" placeholder="请输入账号" />
				<input class="u-border-bottom" type="password" v-model="password" placeholder="请输入密码" />
				<view class="tips">若木有账号密码，请联系管理员551323</view>
				<button @tap="submit" :style="[inputStyle]" class="getCaptcha">登录</button>
				<view class="alternative">
					<view class="action center">
						<text @click="changeLoginWay" style="color: #71B6F7;">{{loginWay}}</text>
					</view>
					<view class="issue">遇到问题</view>
				</view>
			</view>
			<view v-if="loginWay == '账号密码登录'">
			<u-form labelPosition="left" :model="model" :rules="rules" ref="form1">
				<u-form-item label="手机号码:" prop="phone" borderBottom ref="item1" label-width="80">
					<u--input v-model="model.phone" border="none" placeholder="请输入手机号" class="popup-content-input"></u--input>
				</u-form-item>
				<u-form-item label="验证码"	prop="code"	labelWidth="80"	borderBottom>
								
								<u-code-input v-model="model.code" mode="line" :maxlength="4"></u-code-input>
									<u-button
											slot="right"
											@tap="getCode"
											:text="tips"
											type="success"
											size="mini"
											:disabled="disabled1"
										></u-button>
										<u-code
											ref="uCode"
											@change="codeChange"
											seconds="60"
											@start="disabled1 = true"
											@end="disabled1 = false"
										></u-code>
					</u-form-item>
				<view class="tips">若木有账号密码，请联系管理员551323</view>
				<button @tap="submit1" :style="[inputStyle]" class="getCaptcha">登录</button>
				<view class="alternative">
					<view class="action center">
						<text @click="changeLoginWay" style="color: #71B6F7;">{{loginWay}}</text>
					</view>
					<view class="issue">遇到问题</view>
				</view>	
			</u-form>
			<!-- <u-form >
				<view >
					<u-form-item label="手机号码:" ref="item1"	prop="code"	labelWidth="80"	borderBottom>
					<input class="popup-content-input" v-model="phone"  placeholder="请输入手机号" />
					</u-form-item>
			</view>
					<u-form-item label="验证码"	prop="code"	labelWidth="80"	borderBottom>
								
								<u-code-input v-model="code" mode="line" :maxlength="4"></u-code-input>
									<u-button
											slot="right"
											@tap="getCode"
											:text="tips"
											type="success"
											size="mini"
											:disabled="disabled1"
										></u-button>
										<u-code
											ref="uCode"
											@change="codeChange"
											seconds="60"
											@start="disabled1 = true"
											@end="disabled1 = false"
										></u-code>
					</u-form-item>
				<view class="tips">若木有账号密码，请联系管理员551323</view>
				<button @tap="submit1" :style="[inputStyle]" class="getCaptcha">登录</button>
				<view class="alternative">
					<view class="action center">
						<text @click="changeLoginWay" style="color: #71B6F7;">{{loginWay}}</text>
					</view>
					<view class="issue">遇到问题</view>
				</view>	
			</u-form> -->
			</view>
		</view>
		<!-- <view class="buttom" style="margin-top: -100px;">
			<view class="loginType">
				<button class="" @click="appLogin">APP微信授权登录</button>

			</view>	
		</view> -->
	</view>
</template>

<script>
import {loginRes} from '@/config/api.js';
import {loginphone} from '@/config/api.js';
import {code} from '@/config/api.js';
export default {
	data() {
		return {
			loginWay:'短信验证登录',
			disabled1: false,
			username: '',
			password: '',
			deviceId: '',
			tips: '',
			requestId: '',
			model: {
				phone: '',
				code: '',
			},
			rules: {
				'phone': [
				{
					required: true,
					message: '请输入手机号码',
					trigger: ['change','blur'],
				},
				{
					// 正则不能含有两边的引号
					pattern: /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/,
					message: '请输入正确的手机号码',
					trigger: ['change','blur'],
				},
				
			],
			
			},
			systemInfo: {},
		}
	},
	computed: {
		inputStyle() {
			let style = {};
			if(this.username && this.password || this.model.phone && this.model.code) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	async onLoad() {
				// if(!this.$u.utils.isLogin()) return
				// let token=this.$u.vuex('vuex_token')
				// if(!token){
				// 	this.$u.vuex('vuex_token',null)
				// }
				// console.log(uni.getStorageSync('lifeData'))
				// console.log(vm.vuex_token.token)
		},
	onUnload: function() {
		this.systemInfo = {};
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		//点击切换登录方式
		changeLoginWay(){
			if(this.loginWay == '短信验证登录'){
				this.loginWay = '账号密码登录'
				// console.log("222")
			}else if(this.loginWay == '账号密码登录'){
				// console.log("111111")
				this.loginWay = '短信验证登录'
			}
			
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				let url='http://youlanjihua.com/youlanApi/v1/phonecode/send.php'
				console.log(url)
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				const data={
					secret:'abkcq4qn',
					username:this.model.phone,
					}
				// const res= code(data)
				console.log(data)
				 uni.request({
					// url:'http://ysx:8006/admin/api.login/test1', 
					url:'http://youlanjihua.com/youlanApi/v1/phonecode/send.php', 
					
						header: {
							// 'Content-Type': 'application/x-www-form-urlencoded'
							 'Content-Type': 'application/json',//自定义请求头信息
							 'Accept': '*/*',
							 
						},
						 data:{ //设置data配置需要请求的参数
						                secret:'abkcq4qn',
										phone:this.model.phone,
						        },
						method:'GET',//请求方式，必须为大写
						success: (res) => {
							console.log('接口返回------',res);
						}
				  })
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					// uni.$u.toast('验证码已发送，请留意短信');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		appLogin: function() {
		                uni.getProvider({
		                    service: 'oauth',
		                    success: function(res) {
		                        console.log(res.provider);
		                        //支持微信、qq和微博等
		                        if (~res.provider.indexOf('weixin')) {
		                            uni.login({
		                                provider: 'weixin',
		                                success: function(loginRes) {
		                                    console.log('-------获取openid(unionid)-----');
		                                    console.log(JSON.stringify(loginRes));
											// let that =this
											// that.appID='wx5ff2c86c5b07d944';
											// that.secret = 'fe5bf140d4ea3e14e76326d01957ad55';
											// uni.request({
											// url:'https://api.weixin.qq.com/sns/jscode2session?appid='+that.appID+'&secret='+that.secret+ '&js_code=' + res2.code + '&grant_type=authorization_code',
											// data: {},
											// method: 'GET',
											// success(r) {
											// 	 console.log(r.data)
											// 	 that.openId = r.data.openid
											// 	 that.session_key = r.data.session_key
											// }
										 // })
		                                    // 获取用户信息
		                                    uni.getUserInfo({
		                                        provider: 'weixin',
		                                        success: function(infoRes) {
		                                            console.log('-------获取微信用户所有-----');
		                                            console.log(JSON.stringify(infoRes.userInfo));
		                                        }
		                                    });
		                                }
		                            });
		                        }
		                    }
		                });
		            },
		
		async submit1() {
			if(!this.model.phone || !this.model.code) return
			// console.log(11111)
			uni.getSystemInfo({
				success: (res) => {
					 console.log(res)
					this.systemInfo = res
					// console.log("所获取设备数据皆来自设备本身 by kuiwaiwai")
				}
			})
			//处理登录用的参数
			const params={
				username:this.model.phone,
				code:this.model.code,
				requestId:this.requestId,
				deviceId:this.systemInfo.deviceId,//设备id
				deviceModel:this.systemInfo.deviceModel,//设备型号
				deviceBrand:this.systemInfo.deviceModel,//设备品牌
				system:this.systemInfo.system,
				deviceType:this.systemInfo.deviceType,
			}
			const res= await loginphone(params)
			console.log(res)
		},
		
		async submit() {
			if(!this.username || !this.password) return
			uni.getSystemInfo({
				success: (res) => {
					 console.log(res)
					this.systemInfo = res
					// console.log("所获取设备数据皆来自设备本身 by kuiwaiwai")
				}
			})
			//处理登录用的参数
			const params={
				username:this.username,
				password:this.password,
				deviceId:this.systemInfo.deviceId,//设备id
				deviceModel:this.systemInfo.deviceModel,//设备型号
				deviceBrand:this.systemInfo.deviceModel,//设备品牌
				system:this.systemInfo.system,
				deviceType:this.systemInfo.deviceType,

			}
			//请求api进行登录
			
			const res= await loginRes(params)
	        console.log(res)
			 if(res.code==1){
				
					 uni.showToast({
						 title: '登录成功',
						 type: 'success',
						 icon: true,
						 position: 'center',
						 duration: 1500
					 });
					//缓存token
					// const res1=  uni.setStorageSync('lifeData',res.data);
					 this.$u.vuex('vuex_token',res.data.admin)
					// console.log(res1)
					
					//请求用户信息
					//登录之后跳转至来源页
					setTimeout(() => {
							const backUrl=uni.getStorageSync('back_url') || 'pages/index/index'
							// console.log(backUrl)
							this.$u.route({
								type:'reLaunch',
							    url: backUrl,	
							})
					}, 500)
			}else{
				
			}
			
		},
		
	}
};
</script>

<style lang="scss" scoped>
.u-border-bottom{
	margin-bottom: 40rpx !important;
}
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			// color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			// color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			
			&::after {
				border: none;
			}
		}
		.alternative {
			// color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content:space-between;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				// color: $u-content-color;
				font-size: 28rpx;
			}
		}
		
		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			// color: $u-tips-color;
			
			.link {
				// color: $u-type-warning;
			}
		}
	}
}
.no-mode-here {
		color: $u-tips-color;
		font-size: 28rpx;
	}
</style>
